Phaser 是一個免費的2D遊戲框架,用於製作HTML5遊戲,是由 Photon Storm 所開發的。
Phaser是一個HTML5遊戲框架,旨在幫助開發人員真正快速地製作功能強大的跨瀏覽器HTML5遊戲。它是專門為利用台式機和移動設備現代瀏覽器的優勢而創建的。瀏覽器唯一的要求是對canvas標籤的支持。
由於我們做的 Phaser 肯定是需要加載一些圖片、聲音檔、JSON,甚至是 Javascript,所以我們必須為此有個 web server ,要透過 http://
來進行溝通及加載,可以跟筆者一樣偷懶使用 live server 外掛,或者使用node.js
來啟動一個 web server。
先在本地開啟一個 html 將以下程式貼上去,啟動你的 web server 看看有沒有畫面:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.setBaseURL('http://labs.phaser.io');
this.load.image('sky', 'assets/skies/space3.png');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
this.load.image('red', 'assets/particles/red.png');
}
function create ()
{
this.add.image(400, 300, 'sky');
var particles = this.add.particles('red');
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
});
var logo = this.physics.add.image(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
</script>
</body>
</html>
如果有看到以下畫面(一個移動中的Phaser logo),代表你的旅程要準備開始了XD
相信大家對於 Phaser 有一些初步的了解,明天就開始講解一些基本的應用囉!
Phaser
Game
2020鐵人賽